<template>
  <dialog ref="imgDialog">
    <img ref="imgPlayer" style="max-width: 100%; max-height: 100%" />
    <button @click="closeImgDialog">Close</button>
  </dialog>
  <div>
    <div class="loginPart">
      <el-input v-model="searchName" placeholder="Search by time" type="text" />
      <div class="table">
        <el-table :data="numberedFilteredList" stripe height="490" style="width: 100%;"  :default-sort="{ prop: 'time', order: 'descending' }">
          <el-table-column prop="camera_id" label="Camera ID"></el-table-column>
          <el-table-column prop="time" label="Time" sortable></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button @click="toggleEditMode(scope.$index)">查看图片</el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        <table>-->
<!--          <thead>-->
<!--          <tr>-->
<!--            <th>camera_id</th>-->
<!--            <th>time</th>-->
<!--            <th>操作</th>-->
<!--          </tr>-->
<!--          </thead>-->
<!--          <tbody>-->
<!--          <tr v-for="(item, index) in numberedFilteredList" :key="index">-->
<!--            <td >{{ item.camera_id }}</td>-->

<!--            <td >{{ item.time }}</td>-->

<!--            <td>-->
<!--              <button  @click="toggleEditMode(index)">-->
<!--                查看图片-->
<!--              </button>-->
<!--            </td>-->
<!--          </tr>-->
<!--          </tbody>-->
<!--        </table>-->
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import {showMonitorList, showTrackList} from "@/api/history";

const imgDialog = ref<HTMLElement|null>(null);
const imgPlayer = ref<HTMLImageElement|null>(null);
const list = ref([]);

const fetchData = async () => {
  try {
    const response = await showTrackList();
    list.value = response.data.list.map(item => ({
      ...item,
      alarm: reactive({
        camera_id: item.camera_id,
        time: item.time,
        video: item.video, // you might want to rename this to `image`
      }),
    }));
  } catch (error) {
    console.error(error);
  }
};

const searchInput = ref("");
fetchData();

const filteredUsers = computed(() => {
  return list.value.filter(user => user.fields.time.includes(searchInput.value));
});

const searchName = ref("");
const filteredList = computed(() => {
  if (searchName.value === "") {
    return list.value;
  } else {
    return list.value.filter(item =>
        item.time.toLowerCase().includes(searchName.value.toLowerCase())
    );
  }
});

const numberedFilteredList = computed(() => {
  return filteredList.value.map((item, index) => ({
    ...item,
    index: index + 1,
  }));
});

function toggleEditMode(index: number) {
  const item = list.value[index];
  if (item.picture) {
    let addr = item.picture.replace('C:/Users/26368/Desktop/djangoProject1/algorithm/data/', 'http://localhost:8899/videos/');
    // Set the image source
    imgPlayer.value!.src = addr;

    // Open the image dialog
    imgDialog.value!.showModal();
  } else {
    console.error("The item has no video field or the field is undefined.");
  }
}


function closeImgDialog() {
  // Clear the image source
  imgPlayer.value!.src = "";

  // Close the image dialog
  imgDialog.value!.close();
}

</script>

<!-- your styles go here -->


<style scoped>
.loginPart {
  width: 80%;
  margin: 40px auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.table-container {
  width: 100%;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f2f2f2;
}

th,
td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #3498db;
  color: white;
}

td input[type="text"],
td input[type="number"],
td select {
  width: 100%;
  padding: 5px;
  border: none;
  border-radius: 3px;
  background-color: #eaf8ff;
}

td input[type="text"]:disabled,
td input[type="number"]:disabled,
td select:disabled {
  background-color: #f2f2f2;
}
</style>
